<template>
    <div class="integratedQuery">
        <el-button v-show="!isShowDrawer" class="isBtn integratedQueryBtn" @click="drawerShow">
            <i class="iconfont rbp-nav_unfold" />
        </el-button>
        <el-drawer
            :visible.sync="isShowDrawer"
            direction="rtl"
            :before-close="handleClose"
            :show-close="false"
            class="drawer"
            size="280px"
            :modal="false"
            :modal-append-to-body="false"
        >
            <div slot="title" class="drawer-title">
                <el-button class="isBtn isShowDrawerBtn" @click="drawerShow">
                    <i class="iconfont rbp-nav_close" />
                </el-button>
                <p>{{ $t('layout.btns.integratedQuery') }}</p>
                <i class="el-icon-edit mgl-12 hover" @click="editViews" />
                <!-- <el-button
          icon="el-icon-edit"
          @click="editViews" /> -->
            </div>

            <slot name="content">
                <div v-for="(item, index) in moduleList" :key="index" class="content-div">
                    <p>{{ $t(item.label) }}</p>
                    <div v-for="listItem in item.list" :key="listItem.title" @click="goUrl(listItem)">
                        {{ listItem.title }}
                    </div>
                </div>
            </slot>
        </el-drawer>
        <edit-view :moduleList="moduleList" :editViewsDialog="editViewsDialog" @reset="reset" @settingSuccess="updateSetting" />
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue-property-decorator';
import { Dictionary, DialogObj } from '@/typings';
import Component from 'vue-class-component';
import commonApi from '@/api/common-api';
const MODULE_TYPE = new Map([
    ['relationModuleList', 'layout.btns.relatedModules'],
    ['relationReportList', 'layout.btns.relatedReports'],
    ['externalLinkList', 'layout.btns.relatedWeb']
]);
@Component({
    name: 'integratedQuery',
    components: {
        editView: () => import('./edit-views.vue')
    }
})
export default class integratedQuery extends Vue {
    @Prop({ required: true }) dictionary: Dictionary;
    isShowDrawer: boolean = false;
    moduleList: any[] = [];
    editViewsDialog: DialogObj = {
        isShowDialog: false,
        appendToBody: true,
        modalAppendToBody: false,
        title: '编辑相关功能',
        width: '50%'
    };
    created() {
        this.getRelationModuleData();
    }

    async getRelationModuleData(api = commonApi.getRelationModuleId) {
        this.moduleList = [];
        const res = await this._get({
            url: api,
            params: {
                moduleId: this.$route.meta.moduleId
            }
        });
        if (res.code === 0) {
            const data = res.data;
            for (const k in data) {
                const keyList: string = MODULE_TYPE.get(k)!;
                this.moduleList.push({
                    value: k,
                    label: keyList,
                    list: data[k]
                        ? data[k].map((item) => {
                              item.label = item.title;
                              item.moduleId = item.content;
                              return item;
                          })
                        : []
                });
            }
        }
    }
    updateSetting() {
        this.editViewsDialog.isShowDialog = false;
        this.getRelationModuleData();
    }
    drawerShow() {
        this.isShowDrawer = !this.isShowDrawer;
    }
    reset() {
        this.editViewsDialog.isShowDialog = false;
        this.getRelationModuleData(commonApi.resetRelationModuleId);
    }

    handleClose() {
        this.isShowDrawer = false;
    }
    editViews() {
        this.isShowDrawer = !this.isShowDrawer;

        this.editViewsDialog.isShowDialog = true;
    }
    goUrl(item) {
        // type 1.模块;2.报表;3.内嵌式URL;4.弹出式URL
        const type = item.type;
        this.isShowDrawer = false;
        if (type === 1 || type === 2) {
            // const name = item.content.split('?')[0]
            // this.$store.commit('tagsView/SET_RELATIONNAME', name)
            this.$router.push({
                name: `router-${item.content}`
                // params: {
                //   // id: Tools.getQueryVariable(item.content, 'id')
                //   id: item.id
                // }
            });
        } else if (type === 3) {
            // if (item.title === 'vue.js') {
            //   this.$router.push({
            //   // name: 'iframe',
            //   // query: {
            //   //   title: item.title,
            //   //   href: item.content
            //   // }
            //     path: '/iframe/index1',
            //     params: {
            //       title: item.title,
            //       id: item.content
            //     },
            //     query: {
            //       title: item.title,
            //       id: item.content
            //     }
            //   })
            // } else {
            //   this.$router.push({
            //   // name: 'iframe',
            //   // query: {
            //   //   title: item.title,
            //   //   href: item.content
            //   // }
            //     path: '/iframe/index',
            //     params: {
            //       title: item.title,
            //       id: item.content
            //     },
            //     query: {
            //       title: item.title,
            //       id: item.content
            //     }
            //   })
            // }
        } else if (type === 4) {
            window.open(item.content, '_blank');
        }
    }
}
</script>
<style lang="scss">
.integratedQuery {
    .drawer {
        .el-drawer__header {
            height: 56px;
            padding: 0;
            line-height: 56px;
            margin: 0;
            box-shadow: 0px 2px 12px 0px rgba(166, 167, 173, 0.5), 0px 2px 6px 0px rgba(166, 167, 173, 0.5);
        }
        .el-drawer__container {
            .el-drawer {
                overflow: visible;
            }
        }
        // .el-drawer__body {
        //   .isShowDrawerBtn {
        //     left: -24px;
        //   }
        // }
    }
}
</style>
<style lang="scss" scoped>
@import 'src/styles/variables.scss';
.isBtn {
    position: fixed;
    top: 148px;
    width: 24px;
    height: 48px;
    padding: 0;
    color: #a6a7ad;
    border-radius: 4px 0px 0px 4px;
    z-index: 2000;
    border: 0;
}
.drawer {
    position: fixed;
    top: 68px;
    left: $sideBarWidth;
    right: 0;
    bottom: 0;
    overflow: auto;
    margin: 0;
    z-index: 2008 !important;
    .isShowDrawerBtn {
        right: 280px;
        top: 68px;
        height: 56px;
    }
}
.drawer-title {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 18px;
    color: #3b3b3b;
}
.el-dialog__wrapper {
    top: 68px;
    left: $sideBarWidth;
}
.integratedQueryBtn {
    right: 0;
    box-shadow: 0px 2px 12px 0px rgba(166, 167, 173, 0.5);
}
.content-div {
    margin-bottom: 10px;
    > p {
        margin: 13px 16px;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        border-left: solid 4px #186cff;
        color: #186cff;
        font-weight: 500;
        padding-left: 8px;
    }
    > div {
        padding-left: 28px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(53, 61, 81, 1);
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        &:hover {
            background: rgba(245, 245, 247, 1);
        }
    }
}
</style>
